<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <#include "../common/include_easyui.ftl">
        <#assign ctx = request.contextPath>
        <script type="text/javascript">

            var ctxPath = "${ctx}";
            jQuery(function () {

                var toolBarArray = [
                    {
                        id: "addMenu", text: "添加顶级菜单", iconCls: "icon-add", handler: function () {
                            addMenuFun();
                        }
                    },
                    {
                        id: "addSunMenu", text: "添加子菜单", iconCls: "icon-add", handler: function () {
                            addSunMenuFun();
                        }
                    },
                    {
                        id: "edit", text: "修改菜单", iconCls: "icon-edit", handler: function () {
                            editFun();
                        }
                    },
                    {
                        id: "delete", text: "删除菜单", iconCls: "icon-remove", handler: function () {
                            deleteFun();
                        }
                    },
                    {
                        id: "reoload", text: "刷新数据", iconCls: "icon-reload", handler: function () {
                            jQuery("#div_table").treegrid("reload");

                        }
                    }
                ];

                jQuery("#div_table").treegrid({
                    //加载网格的数据
                    url: ctxPath + "/menuMgrController/loadMenuTreeGrid?date=" + new Date() + "",
                    method: 'get',
                    idField: 'menuId',
                    treeField: 'menuName',
                    iconCls: 'icon-ok',
                    rownumbers: true,
                    animate: true,
                    fitColumns: true,
                    //字段的属性
                    columns: [
                        [
                            {field: 'menuName', title: '菜单名称', width: 300, halign: "center"},
                            {field: 'menuId', title: '菜单编号', width: 300, halign: "center"},
                            {
                                field: 'grade',
                                title: '菜单等级',
                                width: 200,
                                formatter: formatGrade,
                                halign: "center",
                                align: "center"
                            },
                            /* {field:'_parentId',	title:'父菜单',	width:300} , */
                            {
                                field: 'menuTarget',
                                title: '菜单位置',
                                width: 200,
                                formatter: formatMenuTarget,
                                halign: "center",
                                align: "center"
                            },
                            {
                                field: 'isLeaf',
                                title: '是否是叶子菜单',
                                width: 100,
                                formatter: formatIsLeaf,
                                halign: "center",
                                align: "center"
                            },
                            {field: 'menuHref', title: '菜单链接', width: 500, halign: "center"}
                            /* ,
                            {field:'isShow',	title:'是否在展示',	width:300}  */
                        ]
                    ],
                    singleSelect: true,
                    striped: true,
                    toolbar: toolBarArray,
                    onContextMenu: onContextMenu
                });

            });


            function formatIsLeaf(isLeaf) {
                if (isLeaf == 1) {
                    return '<div style="color:#32CD32">是</div>';
                } else {
                    return '<div style="color:black">不是</div>';
                }
            }

            function formatMenuTarget(menuTarget) {
                if (menuTarget == 'topFrame') {
                    return '<div>顶部菜单栏</div>';
                } else if (menuTarget == 'rightFrame') {
                    return '<div>右边菜单栏</div>';
                } else if (menuTarget == 'leftFrame') {
                    return '<div>左边菜单栏</div>';
                } else if (menuTarget == 'bottomFrame') {
                    return '<div>底部菜单栏</div>';
                }
            }


            function formatGrade(grade) {

                /* var color = "rgb("+parseInt(Math.random()*255)+","
                         +parseInt(Math.random()*255)+","
                         +parseInt(Math.random()*255)+")"; */
                var colors = ['#FF0000', '#0000FF', '#00FF00', '#FF00FF',
                    '#FFFF00', '#32CD32', '#70DB93', '#9F5F9F',
                    '#E47833', '#8E236B', '#32CD99', '#3232CD', '#6B8E23', '#00FFFF'];

                if (grade == 1) {
                    return '<div style="color:' + colors[grade - 1] + '">顶级菜单</div>';
                } else {
                    return '<div style="color:' + colors[grade - 1] + '">第' + grade + '级菜单</div>';
                }
            }

            function onContextMenu(e, row) {
                //alert("onContextMenu")
                if (row) {
                    e.preventDefault();
                    $(this).treegrid('select', row.menuId);
                    $('#mm').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    });
                }
            }

            function collapse() {
                alert("collapse")
                var node = $('#div_table').treegrid('getSelected');
                if (node) {
                    $('#div_table').treegrid('collapse', node.menuId);
                }
            }

            function expand() {
                //alert("expand")
                var node = $('#div_table').treegrid('getSelected');
                if (node) {
                    $('#div_table').treegrid('expand', node.menuId);
                }
            }

            //添加顶级菜单
            function addMenuFun() {
                var row = $('#div_table').treegrid('getSelected');
                if (row != null) {
                    $("#div_table").treegrid('unselect', row.menuId);
                }

                addFun(null);
            }

            //添加子菜单
            function addSunMenuFun() {
                //alert()
                var selectRow = jQuery("#div_table").treegrid('getSelected');
                if (selectRow == null) {
                    jQuery.messager.alert('添加子菜单提示', '请选择父菜单', 'warning');
                } else {
                    var parentId = selectRow.menuId;
                    addFun(parentId);
                }
            }


            function addFun(parentId) {
                //模态对话框
                var title;
                var addURL;
                if (parentId == null) {
                    title = "添加顶级菜单";
                    addURL = ctxPath + "/menuMgrController/preAdd";
                } else {
                    title = "添加子菜单";
                    addURL = ctxPath + "/menuMgrController/preAdd/" + parentId;
                }


                jQuery('#dialog_div').dialog({
                    title: title,
                    width: 700,
                    height: 500,
                    closed: false,
                    cache: false,
                    modal: true,
                    //href: 		ctxPath+'/easyui/panel_01.jsp'		//只能加载页面中非javascript的内容。
                    content: "<iframe id=\"testIFrame\" src='" + addURL + "' width='99%' height='98%' scrolling='no'></iframe>",
                    buttons: [
                        {
                            id: "saveButton", text: "保存数据", iconCls: "icon-save", handler: function () {
                                callChild_saveData();
                            }
                        },
                        {
                            id: "closeButton", text: "关闭窗口", iconCls: "icon-cancel", handler: function () {
                                jQuery('#dialog_div').dialog("close");
                            }
                        }
                    ]
                });


            }

            function editFun() {
                var selectRow = jQuery("#div_table").treegrid('getSelected');
                if (selectRow == null) {
                    jQuery.messager.alert('修改菜单提示', '修改操作必须选择一行数据', 'warning');
                } else {
                    var parentId = selectRow.menuId;

                    var editURL = ctxPath + "/menuMgrController/preModify/" + parentId + "";
                    jQuery('#dialog_div').dialog({
                        title: "修改菜单",
                        width: 700,
                        height: 500,
                        closed: false,
                        cache: false,
                        modal: true,
                        //href: 		ctxPath+'/easyui/panel_01.jsp'		//只能加载页面中非javascript的内容。
                        content: "<iframe id=\"testIFrame\" src='" + editURL + "' width='99%' height='98%' scrolling='no'></iframe>",
                        buttons: [
                            {
                                id: "saveButton", text: "保存数据", iconCls: "icon-save", handler: function () {
                                    callChild_saveData();
                                }
                            },
                            {
                                id: "closeButton", text: "关闭窗口", iconCls: "icon-cancel", handler: function () {
                                    jQuery('#dialog_div').dialog("close");
                                }
                            }
                        ]
                    });
                }
            }

            function deleteFun() {
                //Dialog对话框
                var selectRow = $('#div_table').treegrid('getSelected');

                if (selectRow == null) {
                    jQuery.messager.alert('删除提示', '请选择要删除的菜单数据', 'warning');
                } else {
                    var prompt = "提示语";

                    //alert(selectRow.isLeaf)
                    if (selectRow.isLeaf != 0) {
                        prompt = "您确定要删除选中的菜单吗？";
                    } else {
                        prompt = "您确定要删除选中的菜单及其子菜单吗？";
                    }

                    $.messager.confirm('删除提示', prompt, function (flag) {
                        if (flag) {
                            var decURL = ctxPath + "/menuMgrController/deleteMenu?date=" + new Date() + "";
                            var paramObj = {'delMenuId': selectRow.menuId};

                            jQuery.post(decURL, paramObj, function (responseData) {

                                var code = responseData.code;

                                if (code == "200") {
                                    $.messager.alert('我的消息', '菜单信息删除成功！', 'info', function () {
                                        jQuery("#div_table").treegrid("reload");
                                    });

                                } else {
                                    $.messager.alert('我的消息', "数据删除出错，原因 ：" + responseData.message, 'error');
                                }

                            }, "json");
                        }
                    });

                }
            }

            function callChild_saveData() {
                var testIFrame = jQuery("#testIFrame")[0];
                var childWin = testIFrame.contentWindow;
                childWin.saveData();
            }

        </script>


    </head>

    <body class="easyui-layout">

        <table id="div_table" title="菜单管理" style="width:100%;height:100%;">
        </table>
        <div id="mm" class="easyui-menu" style="width:150px;">
            <div onclick="addMenuFun()" data-options="iconCls:'icon-add'">添加顶级菜单</div>
            <div onclick="addSunMenuFun()" data-options="iconCls:'icon-add'">添加子菜单</div>
            <div onclick="editFun()" data-options="iconCls:'icon-edit'">编辑菜单</div>
            <div onclick="deleteFun()" data-options="iconCls:'icon-remove'">移除菜单</div>
            <div class="menu-sep"></div>
            <div onclick="collapse()">折叠菜单</div>
            <div onclick="expand()">展开菜单</div>
        </div>
        <div id="dialog_div" style="padding: 0px;"></div>
    </body>
</html>
